<script setup>
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { applyRoleApi } from '@/api/role.js'
import useUserInfoStore from '@/stores/userInfo.js'

const applyUser = reactive({
  username: '',
  userId: 0,
  roleId: 0
})

const applyRole = role => {
  ElMessageBox.confirm(
    '你确定要申请这个角色吗？在管理员受理前无法再申请其他角色',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(async () => {
    applyUser.username = useUserInfoStore().info.username
    applyUser.roleId = role
    applyUser.userId = useUserInfoStore().info.id
    let result = await applyRoleApi(applyUser)
    ElMessage.success(result.msg ? result.msg : '请求已发送')
  })
}
</script>

<template>
  <div class="flex-container">
    <el-card style="max-width: 30%; flex: 1; text-align: center">
      <template #header> 管理员 </template>
      <img src="@/img/manager.jpg" style="width: 100%" alt="" />
      <template #footer>
        <el-button text @click="applyRole(1)">申请成为管理员</el-button>
      </template>
    </el-card>

    <el-card style="max-width: 30%; flex: 1; text-align: center">
      <template #header> 教师 </template>
      <img src="@/img/teacher.jpg" style="width: 100%" alt="" />
      <template #footer>
        <el-button text @click="applyRole(4)">申请成为教师</el-button>
      </template>
    </el-card>

    <el-card style="max-width: 30%; flex: 1; text-align: center">
      <template #header> 学生 </template>
      <img src="@/img/student.jpg" style="width: 100%" alt="" />
      <template #footer>
        <el-button text @click="applyRole(3)">申请成为学生</el-button>
      </template>
    </el-card>
  </div>
</template>

<style scoped>
.flex-container {
  display: flex;
  /* 可选: 如果需要间距，可以添加 gap 属性 */
  gap: 10px; /* 用于控制组件间的间距 */
  margin-top: 100px;
  margin-left: 50px;
}
</style>
